<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true">
			<block slot="content">订单确认</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="address_a" @click="onAddressExpress" v-if="address.id && express_type == 1">
				<view class="address_a_a">
					<u-icon name="map" color="#666666" size="16"></u-icon>
				</view>
				<view class="address_a_d">
					{{ address.contact }},{{ address.telephone }},{{ address.province + address.city + address.district }}{{
						address.address }}
				</view>
				<view class="address_a_c">
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</view>
			
			<!-- 自己 -->
			<view class="address_a" v-if="express_type == 2">
				<view class="address_a_a">
					<u-icon name="map" color="#666666" size="16"></u-icon>
				</view>
				<view class="address_a_d" v-if="self_address!==''">
					<!-- {{ shop_address }},{{ shop_contact }},{{ shop_mobile }} -->
					{{ self_address }}
				</view>
				<view class="address_a_d" v-else>
					<!-- {{ shop_address }},{{ shop_contact }},{{ shop_mobile }} -->
					暂时没有自提地址
				</view>
				<!-- <view class="address_a_c">
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view> -->
			</view>
			<!-- 无地址 -->
			<view class="address_a" @click="onAddressExpress" v-if="!address.id && express_type == 1">
				<view class="address_a_a">
					<u-icon name="map" color="#666666" size="16"></u-icon>
				</view>
				<view class="address_a_b">联系人姓名，手机号码，具体地址具体地址具体地址</view>
				<view class="address_a_c">
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</view>
			
			<!-- 自提 -->
			
			<view class="index_d">
				<view class="index_d_a" v-for="(item, index) in goodsLists" :key="index">
					<view class="index_d_a_a">
						<custom-image :lazy-load="true" width="120rpx" height="120rpx" radius="10rpx" lazy-load
							:src="item.image_str"></custom-image>
					</view>
					<view class="index_d_a_b">
						<view class="index_d_a_b_a">{{ item.goods_name }}</view>
						<view class="index_d_a_b_b">
							<view class="index_d_a_b_b_a">规格：{{ item.spec_value_str }}</view>
						</view>
						<view class="index_d_a_b_d">
							<view class="index_d_a_b_d_a" v-if="item.integral > 0 && item.goods_price > 0">
								积分:{{ item.integral }}+<span>¥</span>{{ item.goods_price }}
							</view>
							<view class="index_d_a_b_d_a" v-if="item.integral > 0 && item.goods_price <= 0">
								积分:{{ item.integral }}
							</view>
							<view class="index_d_a_b_d_a" v-if="item.integral <= 0 && item.goods_price > 0">
								<span>¥</span>{{ item.goods_price }}
							</view>
							<view class="index_d_a_b_d_b">
								X{{ item.goods_num }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="index_d">
				<view class="confirm_order_a">
					<view class="confirm_order_a_a" v-if="orderInfo.total_goods_price > 0">
						<view class="confirm_order_a_a_a">商品金额</view>
						<view class="confirm_order_a_a_b">￥{{ orderInfo.total_goods_price }}</view>
					</view>
					<view class="confirm_order_a_a" v-if="orderInfo.order_integral > 0">
						<view class="confirm_order_a_a_a">所需积分</view>
						<view class="confirm_order_a_a_b">{{ orderInfo.order_integral }}</view>
					</view>
					<view class="confirm_order_a_a" v-if="orderInfo.order_integral > 0">
						<view class="confirm_order_a_a_a">可用积分</view>
						<view class="confirm_order_a_a_b">剩余{{ user_integral }}积分</view>
					</view>
					<view class="confirm_order_a_a">
						<view class="confirm_order_a_a_a">配送方式</view>
						<view class="confirm_order_a_a_b">{{ express_type == 1 ? '快递' : '自提' }}</view>
					</view>
					<view class="confirm_order_a_a" v-if="orderInfo.express_type == 1">
						<view class="confirm_order_a_a_a">运费</view>
						<view class="confirm_order_a_a_b">￥{{ orderInfo.shipping_price }}</view>
					</view>
					<view class="confirm_order_a_a" v-if="express_type == 2">
						<view class="confirm_order_a_a_a">自提点</view>
						<view class="confirm_order_a_a_b">{{ self_address }}</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 160rpx;"></view>
			<view class="index_c">
				<view class="index_c_b">
					<view class="index_c_b_a">需支付：</view>
					<view class="index_c_b_b" v-if="orderInfo.order_integral > 0 && orderInfo.order_amount > 0">
						<span>积分</span>{{ orderInfo.order_integral }}+<span>¥</span>{{ orderInfo.order_amount }}
					</view>
					<view class="index_c_b_b" v-if="orderInfo.order_integral > 0 && orderInfo.order_amount <= 0">
						<span>积分</span>{{ orderInfo.order_integral }}
					</view>
					<view class="index_c_b_b" v-if="orderInfo.order_integral <= 0 && orderInfo.order_amount > 0">
						<span>¥</span>{{ orderInfo.order_amount }}
					</view>
				</view>
				<view class="index_c_a" @click="handleOrderMethods('submit')">确认提交</view>
			</view>
		</view>
	</view>
</template>
<script>
	import request from '@/common/request.js';
	import {
		loadingType
	} from '@/utils/type';
	export default {
		data() {
			return {
				showLoading: true,
				coupon_show: false,
				coupon_bj: request.baseUrl_img + '/img/coupon_bj.png',
				o_dz_dingwei: request.baseUrl_img + '/img/o_dz_dingwei.png',
				gengduo_icon: request.baseUrl_img + '/img/gengduo_icon.png',
				couponId: 0,
				CouponList: [],
				addressId: 0,
				address: [],
				orderInfo: [],
				goodsLists: [],
				goods: [],
				uid: 0,
				user_integral: 0,
				express_type: '',
				// shop_address:'',
				// shop_contact:'',
				// shop_mobile:''
				self_address:''
			}
		},
		onLoad(options) {
			const data = JSON.parse(decodeURIComponent(options.data))
			// console.log(data)
			this.express_type = data.express_type;
			this.goods = data.goods
			this.type = data.type
			this.uid = uni.getStorageSync('uid');
			this.handleOrderMethods('info')
			uni.$on("selectaddress", params => {
				this.addressId = params.id
				this.handleOrderMethods('info')
			})
		},
		onShow() {
			this.uid = uni.getStorageSync('uid');
		},
		mounted() {
			this.getUserInfo();
			this.getselfpickad();
		},
		methods: {
			coupon_click() {
				if (this.CouponList.length > 0) {
					this.coupon_show = true;
				}
			},
			async getUserInfo() {
				let paramsList = {

					uid: this.uid

				};
				let optsList = {
					url: "u-role_config",
					method: "get",
				};
				request.httpRequest(optsList, paramsList).then((res) => {
					if (res.data.code === 200) {
						// console.log(res.data.data);
						const data = res.data.data;
						this.user_integral = data.user_integral || 0;

					}
				});
			},

			coupon_show_click(couponId) {
				this.couponId = couponId;
				this.coupon_show = false;
				this.handleOrderMethods('info');
			},
			// 点击订单提交
			onSubmitOrder() {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否确认提交',
					confirmColor: '#FF2C3C',
					success: ({
						confirm
					}) => {
						if (!confirm) return
						_this.handleOrderMethods('submit')
					}
				});
			},
			// 点击选择收货地址
			onAddressExpress() {
				uni.navigateTo({
					url: `/pages/user_address/user_address?type=${1}`
				})
			},
			goPage(url, type = 1) {
				uni.navigateTo({
					url
				});
			},
			// 初始化页面数据
			async initPageData(paramsList) {
				let url = 'o-buy';
				let optsList = {
					url: url,
					method: 'post'
				};
				let _this = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				try {
					request.httpRequest(optsList, paramsList).then(res => {
						uni.hideLoading();
						if (res.data.code == 200) {
							this.address = res.data.data.address
							this.CouponList = res.data.data.coupon_list;
							this.goodsLists = res.data.data.goods_lists
							this.orderInfo = res.data.data
							console.log("得到订单信息", this.orderInfo)
							this.$nextTick(() => {
								this.showLoading = false;
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
							this.showLoading = false;
						}
					});
				} catch (err) {
					uni.showToast({
						title: '网络异常，请重新进入页面',
						icon: 'none',
						duration: 2000
					});
					this.showLoading = false;
				}
			},
			// 订单提交
			async handleOrderSubmit(from) {
				this.showLoading_tj = true;
				let url = 'o-buy';
				let optsList = {
					url: url,
					method: 'post'
				};
				let _this = this;
				from.remark = this.userRemark
				from.type = this.type
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				try {
					request.httpRequest(optsList, from).then(res => {
						uni.hideLoading();

						// console.log(res.data);
						if (res.data.code == 200) {
							if (res.data.data.code === 0) {
								uni.showToast({
									title: res.data.data.msg,
									icon: 'none',
									duration: 2000
								});
								return;
							} else if (res.data.data.code === 1) {

								uni.redirectTo({
									url: '/pages/order/order_details?id=' + res.data.data.data.order_id
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000,
								});
							}

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					});
				} catch (err) {
					uni.showToast({
						title: '网络异常，请重新进入页面',
						icon: 'none',
						duration: 2000
					});
					this.showLoading = false;
				}
			},
			// 订单处理
			handleOrderMethods(action) {
				// 订单提交数据
				const orderFrom = {
					action,
					goods: this.goods,
					address_id: this.addressId,
					coupon_id: this.couponId,
					uid: this.uid,
				}
				switch (action) {
					case 'info':
						this.initPageData(orderFrom)
						break;
					case 'submit':
						this.handleOrderSubmit(orderFrom)
						break;
				}
			},
			getselfpickad(){
				const _this = this
				uni.request({
					url:request.baseUrl + 'p-public_config',
					method:'GET',
					success(res) {
						if(res.data.code===200){
							// _this.shop_address = res.data.data.shop_address
							// _this.shop_contact = res.data.data.shop_contact
							// _this.shop_mobile = res.data.data.shop_mobile
							_this.self_address = res.data.data.self_address
							
							console.log("自己的信息",_this.shop_address)
						}
						console.log("自提位置",res)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon_show_a {
		width: 750rpx;
		height: 1000rpx;
	}

	.coupon_show_a_a {
		height: 130rpx;
		line-height: 130rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.coupon_show_a_b {
		height: 800rpx;
		overflow-y: auto;
		width: 670rpx;
		margin: auto;
	}

	.coupon_show_a_b_a {
		width: 670rpx;
		height: 180rpx;
		border-radius: 20rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 670rpx 180rpx;
		margin-top: 20rpx;
	}

	.coupon_show_a_b_a_a {
		float: left;
		width: 160rpx;
		height: 180rpx;
		text-align: center;
		line-height: 180rpx;
		font-size: 48rpx;
		font-family: D-DIN;
		font-weight: bold;
		color: #E71102;
	}

	.coupon_show_a_b_a_a span {
		font-size: 30rpx;
	}

	.coupon_show_a_b_a_b {
		height: 180rpx;
		float: left;
		width: 300rpx;
		margin-left: 30rpx;
	}

	.coupon_show_a_b_a_b_a {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		margin-top: 35rpx;
	}

	.coupon_show_a_b_a_b_b {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BBBBBB;
		line-height: 40rpx;
	}

	.coupon_show_a_b_a_b_c {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 40rpx;
	}

	.coupon_show_a_b_a_b_c_a {
		float: left;
	}

	.coupon_show_a_b_a_b_c_b {
		float: left;
		margin-left: 5rpx;
		margin-top: 9rpx;
	}

	.coupon_show_a_b_a_c {
		width: 120rpx;
		height: 60rpx;
		background: linear-gradient(139deg, #E71102, #E71102);
		border-radius: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-top: 45rpx;
		margin-left: 30rpx;
		float: left;
	}


	.trip_order_c_a {
		height: 150rpx;
	}

	.trip_order_c_a_a {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 150rpx;
		float: left;
	}

	.trip_order_c_a_b {
		float: right;
		margin-top: 45rpx;
	}

	.trip_order_c_a_c {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #444444;
		line-height: 150rpx;
		float: right;
	}

	.trip_order_c_a_cc {
		color: #000000;
	}

	.trip_order_c_a_c_a {
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #E71102;
	}

	.trip_order_c_a_c_b {
		float: left;
	}

	.trip_order_c_a_c_b span {
		color: #E71102;
	}

	.trip_order_c_a_c_c {
		float: left;
		margin-top: 65rpx;
		margin-left: 20rpx;
	}

	.trip_order_c_a_d {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #444444;
		line-height: 150rpx;
		float: right;
	}

	.trip_order_c_a_d input {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 150rpx;
		height: 150rpx;
		text-align: right;
	}



	.address_a {
		width: 710rpx;
		height: auto;
		overflow: hidden;
		background: #FFFFFF;
		padding: 33rpx 23rpx;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.address_a_a {
		width: 50rpx;
		height: 50rpx;
		float: left;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 50rpx 50rpx;
	}

	.address_a_b {
		float: left;
		margin-left: 25rpx;
		width: 490rpx;
	}

	.address_a_b_a {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 16rpx;
	}

	.address_a_b_b {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.address_a_c {
		float: right;
		background-position: right;
		background-size: 11rpx 20rpx;
		background-repeat: no-repeat;
		width: 30rpx;
		margin-top: 20rpx;
	}

	.address_a_d {
		overflow: hidden;
		width: 490rpx;
		float: left;
		margin-left: 25rpx;
	}

	.address_a_d_a {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.address_a_d_a span {
		margin-left: 20rpx;
	}

	.address_a_d_b {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.index_c {
		width: 750rpx;
		height: 128rpx;
		background: #FFFFFF;
		position: fixed;
		border-radius: 20rpx 20rpx 0 0;
		bottom: 0;
		padding: 0 55rpx;
	}

	.index_c_a {
		width: 195rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #14288c, #14288c);
		border-radius: 40rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		float: right;
	}

	.index_c_b {
		float: left;
		line-height: 120rpx;
	}

	.index_c_b_a {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		float: left;
	}

	.index_c_b_b {
		// font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #E71102;
		float: left;
	}

	// .index_c_b_b span {
	// 	font-size: 24rpx;
	// }

	.confirm_order_a {
		width: 700rpx;
		height: auto;
		padding: 0rpx 30rpx;
		margin: auto;
	}

	.confirm_order_a_a {
		height: 80rpx;
		line-height: 80rpx;
	}

	.confirm_order_a_a_a {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		float: left;
	}

	.confirm_order_a_a_b {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		float: right;
	}

	.confirm_order_a_b {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		height: 120rpx;
		line-height: 120rpx;
	}

	.confirm_order_a_b_a {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		text-align: right;
	}

	.confirm_order_a_b_a span {
		font-size: 28rpx;
		color: #222222;
	}

	.confirm_order_b {
		height: 106rpx;
		line-height: 106rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		width: 710rpx;
		margin: auto;
	}

	.confirm_order_b span {
		color: #E71102;
	}

	.confirm_order_b_a {
		float: left;
		width: 33.33%;
	}

	.index_d {
		width: 710rpx;
		margin: auto;
		height: auto;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.index_d_a {
		width: 700rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		overflow: hidden;
	}

	.index_d_a_a {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		overflow: hidden;
		float: left;
	}

	.index_d_a_b {
		width: 470rpx;
		height: auto;
		float: left;
		position: relative;
		margin-left: 40rpx;
	}

	.index_d_a_b_a {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.index_d_a_b_b {
		margin-top: 10rpx;
		overflow: hidden;
	}

	.index_d_a_b_b_a {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #CCCCCC;
		float: left;
		line-height: 42rpx;
	}

	.index_d_a_b_d {
		overflow: hidden;
	}

	.index_d_a_b_d_a {
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #E71102
	}

	.index_d_a_b_d_a span {
		font-size: 24rpx;
	}

	.index_d_a_b_d_b {
		float: right;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 50rpx;
	}

	.index_d_a_b_b_b {
		float: left;
	}

	.index_d_a_b_b_b_a {
		background: #FFFFFF;
		border: 1px solid #E5E5E5;
		border-radius: 5px;
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 10rpx;
		float: left;
		margin-left: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #E71102;
	}

	.index_d_a_b_c {
		width: 44rpx;
		height: 44rpx;
		background-color: #E5E5E5;
		border-radius: 50%;
		position: absolute;
		right: -20rpx;
		top: 0rpx;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 21rpx 15rpx;
	}

	.index_d_a_b_cc {
		background-color: #24C68B;
	}
</style>